<template>
	<view class="ynq-Location">
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">定位</view>
			<view v-if="HotCity.length>0" hover-class="Click-Latter" @tap="getLetter('ScrollTop1')">热门</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<view class="ynq-AutoLocation flex" id="ScrollTop">
				<view>定位</view>
				<view class="ynqadd">
					<view @tap="setLoca(CityName, loca_id)">
						<image src="/static/dwicons1.jpg" mode="widthFix"></image>
						<text>{{CityName}}</text>
					</view>
					<view @tap="RestLocation">
						<image src="/static/dwicons2.jpg" mode="widthFix"></image>
						<text>重新定位</text>
					</view>
				</view>
			</view>
			<!-- 热门城市 -->
			<view v-if="HotCity.length>0" class="ynq-HotCity" id="ScrollTop1">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>
				
				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="setLoca(item.name, item.id)" v-for="(item,index) in HotCity" :key="index">{{item.name}}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="setLoca(item1.name, item1.id)" v-for="(item1,name_index) in item.list" :key="name_index">{{item1.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>

	</view>
</template>
<script>
	const app = getApp();
	var cityData = [];
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk = ''
	export default{
		data(){
			return {
				CityName:'',
				HotCity : [],
				LatterName : ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
				CityList : cityData.city, //引用json数据
				LetterId : '',
				loca_id:0,
				loca_name:'',
				//#ifdef H5 || MP-WEIXIN
				key: '2fd9a91cb49b2202c7a478534371e8a6',
				// #endif
			}
		},
		methods: {
			getHot() {
				app.globalData.api.request('Index/getCityHot', {}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						this.HotCity = res.data.hot;
						this.CityList = res.data.list
					}else{
						app.globalData.show(res.msg)
					}
				});
			},
			backs(){
				uni.navigateBack()
			},
			//获取定位点
			getLetter(name){
				this.LetterId = name
				uni.pageScrollTo({
					selector:'#'+name,
					duration:300
				})
			},
			//存储城市缓存
		    setLoca(name, id){
				////console.log(id)
				uni.setStorageSync('citytype', 1)
				uni.setStorageSync('city_name', name);
				uni.setStorageSync('city_id', id);
				////console.log(uni.getStorageSync('city_id'))
				//跳转返回
				uni.navigateBack()
			},
		    setLocas(name, id){
				////console.log(id)
				uni.setStorageSync('citytype', 1)
				uni.setStorageSync('city_name', name);
				uni.setStorageSync('city_id', '');
				
				////console.log(uni.getStorageSync('city_id'))
				//跳转返回
				uni.navigateBack()
			},
			//重新定位
			RestLocation(){
				let that = this
				qqmapsdk = new QQMapWX({
				  key: 'FPEBZ-6YDCR-EFTW6-W24WN-M3LD6-PLBNX'
				});
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						//console.log(res)
						let lat = res.latitude;
						let lng = res.longitude;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						that.latitude = lat;
						that.longitude = lng;
						// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/
						let _key = 'c62bde12b410b83b52f027bb403d9fef'; //高德API key类型：web服务
						uni.request({
							method: 'GET',
							url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
							data: {
								key: _key,
								location: `${lng},${lat}`,
									output: 'JSON'
								},
								success: async (res) => {
								that.CityName = res.data.regeocode.addressComponent.city
								that.getcity(res.data.regeocode.addressComponent.city)
								uni.hideLoading();
								//用户所在的地理位置信息
							},
							fail: r => {
								//console.log(r);
							}
						});
					},
					fail(res) {
						uni.showToast({
							'title':res,
							'icon':'none'
						})
					}
				})
			},
			getcity(city){
				var that = this;
				app.globalData.api.request('index/getcity', {
					name:city
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						that.loca_name = res.data.name;
						that.loca_id = res.data.id;
						that.CityName = res.data.name;
						uni.setStorageSync('city_name', res.data.name);
						uni.setStorageSync('city_id', res.data.id);
					}else{
						app.globalData.show(res.msg)
					}
				});
			}
		},
		onShow() {},
		onLoad() {
			this.getHot();
			this.RestLocation();
			// var that = this;
			// let _key = 'c62bde12b410b83b52f027bb403d9fef'; //高德API key类型：web服务
			// uni.request({
			// 	method: 'GET',
			// 	url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
			// 	data: {
			// 		key: _key,
			// 		location: `${126.714559},${45.690319}`,
			// 		output: 'JSON'
			// 	},
			// 	success: async (res) => {
			// 		//console.log(res)
			// 		this.CityName = res.data.regeocode.addressComponent.city
			// 		that.getcity(res.data.regeocode.addressComponent.city)
			// 		uni.hideLoading();
			// 		//用户所在的地理位置信息
			// 	},
			// 	fail: r => {
			// 		//console.log(r);
			// 	}
			// });
		}
	}
</script>

<style lang="scss" scoped>
	.btns{
		width: 100rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #525254;
		text-align: center;
		float: left;
	}
	.serimg{
		width: 35rpx;
		height: 35rpx;
		display: table;
		position: absolute;
		top:27.5rpx;
		left: 27rpx;
	}
	.iptxt{
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
		padding-left: 80rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222;
		background: #ececec;
		float: left;
		border-radius: 50px;
	}
	.iptxt1{
		width: 602rpx;
		height: 90rpx;
		float: left;
		box-sizing: border-box;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222;
		background: #ececec;
		float: left;
		position: relative;
		border-radius: 50px;
		position: relative;
	}
	.seright{
		width: 702rpx;
		height: 90rpx;
		float: left;
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin-left: 24rpx;
		margin-top: 20rpx;
	}
	.sercon{
		width: 100%;
		height: 130rpx;
		background-color: #fff;
	}
	.ynq-AutoLocation{
		width: 702rpx;
		height: auto;
		margin-left: 24rpx;
	}
	.ynqadd{
		width: 100%;
		height: 35px;
		display: table;
		margin: 10px 0px;
	}
	.ynqadd>view:nth-child(1){
		width: auto;
		height: 35px;
		border-radius: 5px;
		background-color: #f2f2f2;
		padding: 0px 25px;
		margin-right: 10px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		float: left;
	}
	.ynqadd>view:nth-child(1)>text{
		font-size: 15px;
		color: #242424;
	}
	.ynqadd>view:nth-child(2)>text{
		font-size: 15px;
		color:#A263AF;
	}
	.ynqadd>view:nth-child(2){
		width: auto;
		height: 35px;
		border-radius: 5px;
		background-color: #fff;
		padding: 0px 25px;
		margin-right: 10px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		float: right;
	}
	.ynqadd>view>image{
		width: 18px;
		margin-right: 5px;
	}
	.ynq-AutoLocation>view:nth-child(1){
		width: 100%;
		height: auto;
		display: table;
		font-size: 32rpx;
		color: #242424;
		line-height: 22px;
		font-weight: bold;
	}
	.ynq-Location{
		height: 100vh;
	}
	
	.ynq-HotCity{
		padding:20rpx;
	}
	.ynq-HotCityTitle{
		padding:0rpx 0rpx;
		text.ynq{
			margin-right:10rpx;
			color: #ff0000;
			font-size:32rpx;
		}
		text{
			font-size:30rpx;
		}
	}
	.ynq-HotCityList{
		padding:20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;
		
	}
	.ynq-HotCityList>text{
		width: 32%;
		display: inline-block;
		text-align: center;
		background: #f2f2f2;
		margin-bottom:10rpx;
		font-size:26rpx;
		padding:15rpx 0;
		border-radius: 10rpx;
		margin: 5px 0px;
		margin-right: 2%;
	}
	.ynq-HotCityList>text:nth-child(3n){
		margin-right: 0px !important;
	}
	.ynq-Letter{
		position: fixed;
		right:5rpx;
		top:160rpx;
		width: auto;
		z-index:100;
		view{
			display: block;
			width: auto;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}
	
	.ynq-CityList{
		padding:0px 40rpx 0 20rpx;
		padding-left: 0px;
		.ynq-CityLetter{
			line-height: 30rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size:24rpx;
			font-weight: bold;
			background-color: #f2f2f2;
			padding-left:24rpx;
			color: #222;
		}
		.ynq-CityLine{
			text{
				display: block;
				line-height: 60rpx;
				font-size:30rpx;
				color: #222;
				width: 680rpx;
				margin-left: 24rpx;
				border-bottom: 1px solid #f2f2f2;
			}
		}
	}
	.ynq-ScrollView{
		height: calc(100vh - 40rpx);
	}
	.Click-Latter{
		font-size:30rpx !important;
	}
</style>